<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>展示数据</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.common.dev.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
</style>

<body>
    <div id="app">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-input placeholder="请输入包号" v-model="input" clearable>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="getdata">确定</el-button>
                    </el-col>
                </el-row>
                </el-input>
            </div>
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-card class="box-card">
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <div class="szie">
                                        <i class="el-icon-notebook-2 iconss"></i>
                                    </div>
                                </el-col>
                                <el-col :span="18">
                                    <div class="grid-content purple">{{toThousands(jh)}} 次</div>
                                    <div class=" ">总激活量</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-card class="box-card">
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <div class="szie1">
                                        <i class="el-icon-user iconss"></i>
                                    </div>
                                </el-col>
                                <el-col :span="18">
                                    <div class="grid-content purple">{{toThousands(zc)}} 次</div>
                                    <div class=" ">总注册量</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-card class="box-card">
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <div class="szie3">
                                        <i class="el-icon-s-marketing iconss"></i>
                                    </div>
                                </el-col>
                                <el-col :span="18">
                                    <div class="grid-content purple">{{toThousands(bm)}} 次</div>
                                    <div class=" ">总报名量</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="grid-content bg-purple">
                        <el-card class="box-card">
                            <el-row :gutter="20">
                                <el-col :span="5">
                                    <div class="szie2">
                                        <i class="el-icon-circle-check iconss"></i>
                                    </div>
                                </el-col>
                                <el-col :span="18">
                                    <div class="grid-content purple">{{toThousands(fz)}} 次</div>
                                    <div class=" ">总复制量</div>
                                </el-col>
                            </el-row>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </el-card>
    </div>



</body>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                input: localStorage.getItem("input") || '',
                jh: 0,
                zc: 0,
                bm: 0,
                fz: 0,
            }
        },
        methods: {
            toThousands(num) {
                return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
            },
            getdata() {
                localStorage.setItem('input', this.input)
                fetch(`/web/qudaotongji?mark=${this.input}`, {
                    method: 'GET'
                }) // 返回一个Promise对象
                    .then((res) => {
                        return res.json();
                    })
                    .then((res) => {
                        console.log(res);
                        if (res.length > 0) {
                            this.jh = 0
                            this.zc = 0
                            this.bm = 0
                            this.fz = 0
                            res.forEach(element => {
                                switch (element._id) {
                                    case "jihuo":
                                        this.jh = element.number
                                        break;
                                    case "zhuche":
                                        this.zc = element.number
                                        break;
                                    case "fuzhi":
                                        this.fz = element.number
                                        break;
                                    case "baomin":
                                        this.bm = element.number
                                        break;

                                }
                            });
                        } else {
                            this.jh = 0
                            this.zc = 0
                            this.bm = 0
                            this.fz = 0
                        }
                    })
            }

        },
        created() {
            this.getdata()
        },
    })
</script>
<style>
    .el-card {
        min-width: 359px;
    }

    #app {
        text-align: center;
        min-width: 750px;
        max-width: 1540px;
        margin: 200px auto;
    }

    .szie {
        text-align: center;
        background: #45a3fc;
        font-size: 50px;
        width: 55px;
    }

    .szie1 {
        text-align: center;
        background: #9664e1;
        font-size: 50px;
        width: 55px;
    }

    .szie2 {
        text-align: center;
        background: #27c2c1;
        font-size: 50px;
        width: 55px;
    }

    .szie3 {
        text-align: center;
        background: #ff9800;
        font-size: 50px;
        width: 55px;
    }

    .iconss {
        color: white;
    }

    .grid-content {
        padding: 5px 0;
    }

    .purple {
        border-bottom: 1px solid #eee;
        font-size: 22px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

</html>